<%--
  Created by IntelliJ IDEA.
  User: ldh
  Date: 2024/10/16
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <!--引用网络的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--通过axios发送异步请求获取所有学生得到信息并展示在网页中-->
<div id="app">
    <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>头像</th>
            <td>班级</td>
        </tr>
        <!--jstl标签-->
        <tr v-for="s in students">
            <td>{{s.id}}</td>
            <td>{{s.name}}</td>
            <td>{{s.age}}</td>
            <td>{{s.gender}}</td>
            <td>{{s.birthday}}</td>
            <td>
                <img :src="s.headimg" width="80"/>
            </td>
            <td>
                {{s.classInfo.name}}
            </td>
        </tr>
    </table>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            students: undefined, // 表示所有的学生。
        },
        created() { // 页面加载的时候就执行这个方法
            this.loadStudent();
        },
        methods: {
            //加载所有学生信息.
            loadStudent() {
                axios.get("/student/list").then(resp => {
                    if(resp.data.code===200){ //===:比较值和数据类型  ==：只比较值
                        //吧查询的结果赋值给students数据。axios把后台返回的接口自己封装到dao属性上
                        this.students=resp.data.data;
                    }

                })
            }
        }
    })
</script>
</html>